<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.hi{
	background-color: yellow;
}


</style>


</head>
<body>
<hr/>
<h1>All Products</h1>
<table id="ps">
	
</table>
<h1>All Bases</h1>
<table id="bs">
	
</table>


<script type="text/javascript">
//定义对象，封装ajax
var $=(function(){
  function inner(){
	};
	inner.prototype.ajax=function(cf){
		
		var xhr;
		xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			if(xhr.status==200){
				if(xhr.readyState==4){
					var d=JSON.parse(xhr.responseText);
					cf.success(d);
				}
			}
		};
		xhr.open(cf.method,cf.url);
		for(var t in cf.headers){
			xhr.setRequestHeader(t,cf.headers[t]);
		}
		xhr.send(JSON.stringify(cf.data));
	};
	return new inner();
})();
window.onload=function(){
	var tb=document.getElementById("bs");
	var pstb=document.getElementById("ps");
	
	//渲染仓库
	function renderBases(tb,bs){
		
		for(var i=0;i<bs.length;i++){
			var tr=document.createElement("tr");
			var td1=document.createElement("td");
			td1.innerHTML=bs[i].id;
			var td2=document.createElement("td");
			td2.innerHTML=bs[i].bname;
			var td3=document.createElement("td");
			td3.innerHTML=bs[i].location;
			
			var td4=document.createElement("td");
			var showProsBtn=document.createElement("button");
			showProsBtn.innerHTML="show Produts";
			showProsBtn.onclick=function(){
				var tr=this.parentNode.parentNode;
				tr.className="hi";
				var id=tr.firstChild.innerHTML;
				$.ajax({
					method:"GET",
					url:"findProductsByBaseId?id="+id,
					success:function(d){
						renderProducts(pstb,d);
					}
				});	
			}
			td4.appendChild(showProsBtn);
			
			
			
			var td5=document.createElement("td");
			var delBaseBtn=document.createElement("button");
			delBaseBtn.innerHTML="Del Base";
			delBaseBtn.onclick=function(){
				var tr=this.parentNode.parentNode;
				var id=tr.firstChild.innerHTML;
				$.ajax({
					method:"GET",
					url:"deleteBase?id="+id,
					success:function(d){
						if(d==1){
							tr.parentNode.removeChild(tr);
							loadAllProducts();
						}
					}
				});	
			}
			td5.appendChild(delBaseBtn);
			
			
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			tr.appendChild(td5);
			tb.appendChild(tr);
		}
	}
	
	//渲染产品
	function renderProducts(tb,ps){
		tb.innerHTML="";
		for(var i=0;i<ps.length;i++){
			var tr=document.createElement("tr");
			var td1=document.createElement("td");
			td1.innerHTML=ps[i].id;
			var td2=document.createElement("td");
			td2.innerHTML=ps[i].pname;
			var td3=document.createElement("td");
			td3.innerHTML=ps[i].price;
			
			var td4=document.createElement("td");
			td4.innerHTML=ps[i].base.location;
			
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			tb.appendChild(tr);
		}
	}
	
	
	//请求所有的仓库
	$.ajax({
			method:"GET",
			url:"findAllBases",
			success:function(d){
				renderBases(tb,d)
			}
	});	
	
	function loadAllProducts(){
		//请求所有的产品
		$.ajax({
				method:"GET",
				url:"findAllProducts",
				success:function(d){
					renderProducts(pstb,d)
				}
		});	
	}
	loadAllProducts();
	
	
	
}









</script>
</body>
</html>